<template>
  <div class="app-container">
    <h5 class="titleInfo">结算信息</h5>
    <div v-loading="tableLoading" class="listDiv">
      <el-form ref="form" class="form" :model="form" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单号">
              <span class="spanToInput">{{ detailsList.order_sn }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付流水号">
              <span class="spanToInput">{{ detailsList.out_trade_no }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称">
              <span class="spanToInput">{{ detailsList.name }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单应付金额">
              <span class="spanToInput">￥{{ detailsList.order_price }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型">
              <span class="spanToInput">{{ detailsList.type }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="积分抵扣">
              <span class="spanToInput">{{ detailsList.deduction_integral }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户姓名">
              <span class="spanToInput">{{ detailsList.username }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠券">
              <span class="spanToInput">{{ detailsList.type_money }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码">
              <span class="spanToInput">{{ detailsList.user_phone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="PLUS会员优惠">
              <span class="spanToInput">￥{{ detailsList.member_discount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算状态">
              <span class="spanToInput">{{ detailsList.status }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单实付金额">
              <span class="spanToInput">￥{{ detailsList.price }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算金额">
              <span class="spanToInput">￥{{ detailsList.service_charge }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分佣比例(服务费)">
              <span class="spanToInput">￥{{ detailsList.service_price }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算日期">
              <span class="spanToInput">{{ detailsList.time }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getDetails } from '@/api/financeList'
export default {
  name: 'FinanceInfo',
  data() {
    return {
      form: {},
      detailsList: {},
      tableLoading: true
    }
  },
  created() {
    const id = this.$route.query.id
    this.getList(id)
  },
  methods: {
    getList(e) {
      getDetails(e)
        .then(res => {
          if (res.data.code == 200) {
            this.detailsList = res.data.data
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
          this.tableLoading = false
        })
        .catch(err => {
          this.tableLoading = false
          this.errorStatus(err.msg)
        })
    }
  }
}
</script>
<style scoped>
.app-container {
    padding: 0.1px !important;
}
</style>
